import React, { Component } from 'react'
import '../style/App.css'
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      arry: [
        { id: 0, name: '1元' },
        { id: 1, name: '2元' },
        { id: 2, name: '5元' },
        { id: 7, name: '10元' },
        { id: 0, name: '点击抽奖' },
        { id: 3, name: '5元' },
        { id: 6, name: '1元' },
        { id: 5, name: '2元' },
        { id: 4, name: '1元' },
      ],
      // 计时器
      time: null,
      // 随机的id
      prize: null,
      // 选中的格子
      actived: 0,
      count: 0,
      isRolling: true
    }
  }

  render() {
    return (
      <div>
        <ul className="wrap">
          {
            this.state.arry.map((v, i) => {
              return <li className={this.state.actived === this.state.arry[i].id ? 'preze' : 'item'} key={i} onClick={() => { this.btn(i) }}>
                {v.name}
              </li>
            })
          }
        </ul>
      </div>
    )
  }
  btn = function draw(i) {
    // 判断是否是按钮 和是否可以抽奖
    if (i === 4 && this.state.isRolling) {
      // 设置随机的数并修改为不可以抽奖
      this.setState({
        prize: Math.floor(Math.random() * 8 + 30),
        isRolling: false
      })
      // 设置计时器
      let times = setInterval(() => {
        this.setState({
          actived: this.state.actived + 1,
          count: this.state.count + 1
        })
        // 如果转一圈重置
        if (this.state.actived === 8) {
          this.setState({
            actived: 0
          })
        }
        // 判断停止的条件
        if (this.state.count === this.state.prize) {
          this.setState({
            count: 0,
            isRolling: true
          })
          clearInterval(this.state.time)
        }
      }, 100);
      this.setState({
        time: times
      })
    }
  }

}
